<template>
  <view class="myUser">
    <view class="heard">
      <u-avatar
          :src="user_info.headImg&&user_info.headImg.fileUrl+'?Authorization='+userInfo.token+'&us=app'"
          class="u-avatar"
          size="120"
          @click="previewImage"
      >
      </u-avatar>
      <view class="right">
        <view class="r-title">{{ user_info.userName }}</view>
        <view class="r-tag">
          <u-tag
              v-for="(item,index) in user_info.roleList"
              :key="index"
              :text="item"
              class="u-tag"
              shape="circle"
              size="mini"
              type="success"
          />
        </view>
      </view>
    </view>
    <view class="bg"></view>
    <u-cell-group>
      <u-cell-item
          icon="account"
          :title="$t('个人信息')"
          @click="navigateTo('../template/personaInfo/personaInfo')"
      />
      <u-cell-item
          icon="lock"
          :title="$t('账号与安全')"
          @click="navigateTo('../template/accountSafe/accountSafe')"
      />
      <!-- #ifdef APP-PLUS -->
      <u-cell-item
          v-if="platform === 'android'"
          icon="lock"
          :title="$t('量子管理')"
          @click="navigateTo('../template/qss/qss')"
      />
      <!-- #endif -->
      <view class="title">
        <text>{{$t('关于')}}</text>
      </view>
      <navigator url="../template/agreement/agreement">
        <u-cell-item icon="calendar" :title="$t('隐私政策')"></u-cell-item>
      </navigator>
      <navigator url="../template/agreement/privacy">
        <u-cell-item icon="calendar" :title="$t('隐私政策摘要')"></u-cell-item>
      </navigator>
      <navigator url="../template/agreement/perInfoList">
        <u-cell-item icon="bookmark" :title="$t('个人信息清单')"></u-cell-item>
      </navigator>
      <navigator url="../template/agreement/sdk">
        <u-cell-item icon="coupon" :title="$t('第三方SDK')"></u-cell-item>
      </navigator>
      <u-cell-item icon="tags" :title="$t('关于云玺量子')" @click="navigateTo('../template/about/about')"></u-cell-item>
      <view class="title"></view>
      <u-cell-item
          @click="navigateTo('../template/language/language')"
      >
        <view slot="title" style="display: flex; align-items: center;">
          <u-image width="34rpx" height="34rpx" src="@/static/image/icon_lang.png" style="margin-bottom:5rpx;margin-right: 8rpx;"/>
          <text>{{$t('语言')}}</text>
        </view>
      </u-cell-item>
      <u-cell-item icon="zhuanfa" :title="$t('退出登录')" @click="LogOut()"></u-cell-item>
    </u-cell-group>

    <u-no-network></u-no-network>
  </view>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
import i18n from '@/lang/lang'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
  },
  data() {
    return {
      platform: uni.getSystemInfoSync().platform,
      user_info: '',
    }
  },
  onLoad() {
  },
  onShow() {
    uni.setNavigationBarTitle({title: this.$t('我的')})

    //获取用户信息
    this.get_user_img()
  },
  methods: {
    ...mapActions(['remove_logout']),
    previewImage() {
      if (this.user_info.headImg) {
        uni.previewImage({
          urls: [this.user_info.headImg.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'],
        });
      }
    },
    navigateTo(url) {
      uni.navigateTo({url});
    },
    //退出登录
    LogOut() {
      uni.showModal({
        title: this.$t('提示'),
        content: this.$t('确认退出登录') + '？',
        success: (res) => {
          if (res.confirm) {
            this.$u.post(this.api.GLOBAL_auth_user_logout, {userId: this.userInfo.userId}).then(res => {
              if (res.code === 200) {
              }
            })
            //用户退出
            this.remove_logout()
            uni.reLaunch({
              url: '../template/login/login'
            });
          } else if (res.cancel) {
          }
        }
      });
    },
    //获取用户信息
    get_user_img() {
      this.$u.post(this.api.GLOBAL_auth_user_get, {}).then(res => {
        if (res.code === 200) {
          this.user_info = res.data;
        }
      })
    },
  }
}
</script>

<style lang="scss">
.myUser {
  background-color: #f0f0f0;
  height: 100%;
  overflow: auto;

  .heard {
    position: relative;
    z-index: 100;
    display: flex;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    color: #fff;

    .u-avatar {
      margin-right: 20rpx;
    }

    .right {
      .r-title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .r-tag {
        max-height: 200rpx;
        overflow-y: auto;
        max-width: 500rpx;

        .u-tag {
          margin-right: 20rpx;
          margin-top: 10rpx;
        }
      }
    }
  }

  .bg {
    height: 300rpx;
    width: 100%;
    background: linear-gradient(to bottom, #0079FF 20%, #00C6FF);
    border-radius: 0 0 30% 30%;
    position: absolute;
    top: 0;
  }

  .uni-list {
    margin-top: 10rpx;
  }

  .title {
    padding: 0 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #6c6c6c;
  }
}
</style>
